<template>
    <div :ref="$options.name" class="chartInstance" />
</template>
<script>
    import chartmixins from '../../util/echartmixins'
    import * as echarts from 'echarts'
    export default {
        name: 'Pie-markNumber-score',
        components: {},
        mixins: [chartmixins],
        props: {
            insideData: {
                type: Number,
                default: 20
            },

            outsideData: {
                type: Number,
                default: 80
            },

            textData: {
                type: Array,
                default: () => [
                    '118',
                    'wuchuang',
                    'autism'
                ]
            },

            markNumber: {
                type: Number,
                default: 80
            },

            chartStyle: {
                type: Object,
                default: () => {
                    return {
                        'mainColor': '#ff7940',
                        'firstColor': '#8d8793',
                        'secondColor': 'rgba(65,63,112,1)',
                        'borderColor': 'rgba(0,0,0,0.1)',
                        'activeColor': [
                            { offset: 0,  color: 'rgba(255, 121, 6, 0.3)' },
                            { offset: 0.5, color: 'rgb(255, 121, 64)' },
                            { offset: 1, color: 'rgb(255, 121, 64)'}
                            // { offset: 0,  color: '#3876cd' },
                            // { offset: 0.5, color: '#45b4e7' },
                            // { offset: 1, color: '#54ffff'}
                        ],
                        'disactiveColor': 'rgb(67,67,67)',
                    }
                }
            }
        },
        data() {
            return {
                defaultOptions: {
                    title: [
                        {
                            text: this.textData[0],
                            x: "50%",
                            y: "37%",
                            textAlign: "center",
                            textStyle: {
                                fontSize: this.formatFontSize(30),
                                fontWeight: "100",
                                color: this.chartStyle.mainColor,
                                textAlign: "center",
                            }
                        },

                        {
                            text: this.textData[1],
                            left: "50%",
                            top: "52%",
                            textAlign: "center",
                            textStyle: {
                                fontSize: this.formatFontSize(14),
                                fontWeight: "400",
                                color: this.chartStyle.firstColor,
                                textAlign: "center",
                            },
                        },

                        {
                            text: this.textData[2],
                            left: "50%",
                            top: "57%",
                            textAlign: "center",
                            textStyle: {
                                fontSize: this.formatFontSize(12),
                                fontWeight: "400",
                                color: this.chartStyle.secondColor,
                                textAlign: "center",
                            },
                        },
                    ],
                    
                    polar: {
                        radius: ["70%", "80%"],
                        center: ["50%", "50%"],
                    },

                    angleAxis: {
                        max: 100,
                        show: false,
                    },

                    radiusAxis: {
                        type: "category",
                        show: true,
                        axisLabel: {
                            show: false,
                        },
                        axisLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                    },

                    series: [
                        {
                            name: "",
                            type: "bar",
                            roundCap: true,
                            barWidth: this.formatFontSize(40),
                            showBackground: true,
                            backgroundStyle: {
                                color: this.chartStyle.disactiveColor,
                            },
                            data: [],
                            coordinateSystem: "polar",
                            itemStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, this.chartStyle.activeColor)
                                },
                            },
                        },

                        {
                            hoverAnimation: false,
                            type: "pie",
                            z: 2,
                            data: [],
                            radius: ["50%", "65%"],
                            zlevel: -2,
                            itemStyle: {
                                normal: {
                                    borderColor: this.chartStyle.borderColor,
                                    borderWidth: this.formatFontSize(1),
                                },
                            },
                            label: {
                                normal: {
                                    position: "inside",
                                    show: false,
                                },
                            },
                        },

                        {
                            hoverAnimation: false,
                            type: "pie",
                            z: 1,
                            data: [],
                            radius: ["50%", "65%"],
                            zlevel: -2,
                            itemStyle: {
                                normal: {
                                    borderColor: this.chartStyle.borderColor,
                                    borderWidth: this.formatFontSize(1),
                                },
                            },
                            label: {
                                normal: {
                                    position: "inside",
                                    show: false,
                                },
                            },
                        },

                    ]





                }
            }
        },
        computed: {
            formatOptions() {
                return Object.assign({
                    'mainColor': '#ff7940',
                    'firstColor': '#8d8793',
                    'secondColor': 'rgba(65,63,112,1)',
                    'borderColor': '#e5e5e5',
                    'activeColor': [
                        { offset: 0,  color: '#3876cd' },
                        { offset: 0.5, color: '#45b4e7' },
                        { offset: 1, color: '#54ffff'}
                    ],
                    'disactiveColor': 'rgb(67,67,67)',
                }, this.chartStyle)
            },
        },
        methods: {
            refreshChartData() {
                const activeData = []
                const disActiveData = []
                const { activeColor, disactiveColor } = this.formatOptions

                for(let i = 0;  i < this.markNumber; i++) {
                    const options = {
                        value: 1,
                        name: i,
                        itemStyle: {
                            normal: {
                                color: disactiveColor
                            },
                        },
                    }
                    if(i < this.insideData) {
                        options.itemStyle.normal.color = new echarts.graphic.LinearGradient(0, 0, 0, 1, activeColor)
                        activeData.push(options)
                    } else {
                        activeData.push(options)
                    }

                    disActiveData.push({
                        value: 1,
                        name: i,
                        itemStyle: {
                            normal: {
                                color: disactiveColor
                            },
                        },
                    })
                }


                this.defaultOptions.series[0].data = [this.outsideData]
                this.defaultOptions.series[1].data = activeData
                this.defaultOptions.series[2].data = disActiveData

                this.setOption(this.defaultOptions, true)
            }
        },
        beforeCreate() {

        },
        created() {

        },
        beforeMount() {

        },
        mounted() {
            this.refreshChartData()
        },
        beforeDestroy() {

        },
    }
</script>
<style lang="scss" scoped horizontalvw>
    .chartInstance {
        width: 100%;
        height: 100%;
    }
</style>